<template>
  <view class="swiperContainer">
    <swiper :circular="circular" :current="currentIndex"  :autoplay="swiperAutoplay"
      interval="5000" duration="500" indicator-active-color="#862633" indicator-color="#efefef" class="swiper"
      @change="swiperChange" :class="carouselArrId.length>1?'':'swiper-dots-none'">
      <block v-for="(swiperItem, swiperIndex) in carouselArrId" :key="swiperIndex">
        <swiper-item v-if="pdpShowVideoConfig && swiperItem.type == 'video'">
          <video id="myVideo" :src="swiperItem.url" autoplay="true" loop="true" :controls="false" @ended="videoEndEvent"
            class="slide-image"></video>
        </swiper-item>
        <swiper-item v-if="swiperItem.type == 'image'">
          <image :src="swiperItem.url" :data-src="swiperItem.url" class="slide-image" @click="previewImage"
            mode="widthFix" />
        </swiper-item>
      </block>
    </swiper>
    <view class="swiper-button-prev">
      <view class="left-back" @click.stop="leftImg">
        <text class="iconfont icon-jiantouxiangzuo _i"></text>
      </view>
    </view>
    <view class="swiper-button-next">
      <view class="right-forword" @click.stop="rightImg">
        <text class="iconfont icon-jiantouxiangyou"></text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperChangeTimeStamp: new Date().getTime(),
        circular: true,
        currentIndex: 0,
        swiperAutoplay: true,
      }
    },
    props: {
      carouselArrId: {
        type: Array
      },
      detail: {
        type: Object
      },
      pdpShowVideoConfig: {
        type: Boolean
      }
    },
    methods: {
      setPlayStatus(val){
        this.swiperAutoplay = val
      },
      swiperChange(e) {
        let currentTimeStamp = new Date().getTime()
        let {
          current,
          source
        } = e.detail
        if (currentTimeStamp - this.swiperChangeTimeStamp <= 500) {
          this.swiperChangeTimeStamp = currentTimeStamp
          return false
        } else {
          this.swiperChangeTimeStamp = currentTimeStamp
        }
        this.currentIndex = e.detail.current;
      },
      leftImg(e) {
        let {
          current,
          source
        } = e.detail
        let currentTimeStamp = new Date().getTime()
        if (currentTimeStamp - this.swiperChangeTimeStamp <= 500) {
          this.swiperChangeTimeStamp = currentTimeStamp
          return false
        } else {
          this.swiperChangeTimeStamp = currentTimeStamp
        }
        this.circular = false
        let num = this.carouselArrId.length - 1
        if (this.currentIndex <= 0) {
          this.currentIndex = num
        } else {
          this.currentIndex--
        }
      },
      rightImg(e) {
        let {
          current,
          source
        } = e.detail
        let currentTimeStamp = new Date().getTime()
        if (currentTimeStamp - this.swiperChangeTimeStamp <= 500) {
          this.swiperChangeTimeStamp = currentTimeStamp
          return false
        } else {
          this.swiperChangeTimeStamp = currentTimeStamp
        }
        this.circular = true
        let num = this.carouselArrId.length - 1
        if (this.currentIndex >= num) {
          this.currentIndex = 0
        } else {
          this.currentIndex++
        }
      },
      videoEndEvent() {
        let that = this;
        that.swiperAutoplay = true;
      },
      previewImage(e) {
        let current = e.target.dataset.src;
        let imageArry = [];
        let obj = this.detail.photoList;
        if (!obj || Object.keys(obj).length < 1) {
          return false
        }
        Object.keys(obj).forEach(item => {
          imageArry.push(obj[item].photo);
        });
        uni.previewImage({
          current: current, // 当前显示图片的http链接
          urls: imageArry // 需要预览的图片http链接列表
        });
      },
    }
  }
</script>

<style lang="less">
  .swiper {
    min-height: 750rpx;
  }
  .slide-image {
    width: 100%;
    height: 100%;
  }
  .swiperContainer {
    position: relative;
    transform: translate3d(0, 0, 0);
    overflow: hidden;

    .swiper {
      transform: translate3d(0, 0, 0);
    }

    .iconfont {
      font-size: 28px;
      color: #999999;
    }

    .left-back,
    .right-forword {
      width: 70rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 9;
    transform: translate(0, -50%);
  }

  .swiper-button-prev {
    left: 0;
  }

  .swiper-button-next {
    right: 0;
  }
  /* .wx-swiper-dot {
    width: 42rpx !important;
    height: 4rpx !important;
    border-radius: 0 !important;
    margin-left: -16rpx !important;
  } */
</style>
